<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
  <script>
    
    const app = Vue.createApp({    
      template:`<child/>`,
      setup(){
        const {provide,ref,readonly}=Vue;
        let name=ref('dell')
        provide('name',readonly(name))
        provide('changeName',(value)=>{
          name.value=value
        })
        return{}
      }
    });

    app.component('child', {
      template:`<div @click="click">{{name}}</div>`,
      setup(){
        const {inject}=Vue;
        const name=inject('name');
        const changeName=inject('changeName');
        function click(){
          changeName('lee')
        }
        return {name,click}

      }
    });
   
    const vm = app.mount('#root');
  </script>
</body>

</html>